<template>
	<CustomNavBar :showBack="false" :bgColor="'#fff'">
		<template #left>
			<topLeftIconVue></topLeftIconVue>
		</template>
	</CustomNavBar>
	<view class="" :style="{ paddingTop: `${data.navBarHeight}px` }">
		<view class="search_box" @click="gosearch">
			<image src="/static/coment/icon-search@2x.svg" mode="aspectFill" class="search_icon"></image>
			<!-- <input type="text" value="" class="full_flex" /> -->
		</view>
		<filtrateBoxVue @confirmData='confirmData'></filtrateBoxVue>
		<scroll-view scroll-y="true" class="scroll_view" refresher-enabled :refresher-triggered="triggered"
			@refresherrefresh="refreshFn" @scrolltolower='scrolltolower'>
			<view class="main">
				<view class="block" v-for="(item,index) in listData" :key="index" >
					<image :src="item.imageUrl" mode="" class="picture" v-if="item.imageType == 'image'"></image>
					<video :src="item.imageUrl" class="picture" v-else></video>
					<!-- <view class="picture">
						<image :src="item.imageUrl" mode="widthFix" class="picture_po" v-if="item.imageUrl"></image>
						<image src="/static/default.png" mode="widthFix" class="picture_po" v-else></image>
					</view> -->
					<view @click="handleClick(item.id)">
					<view class="title">
						{{item.name}}
					</view>
					<view class="address">
						<image src="/static/coment/adderss.svg" class="address_icon" mode=""></image>
						{{item.address}}
					</view>
					<view class="label_price">
						<view class="label_box">
							<block v-for="(ite,inde) in item.tagNameList" :key="inde">
							<text v-if="inde<4">{{ite}}</text>
							</block>
						</view>
						<view class="price">
							<text>¥</text>
							{{item.price}}
							<text>/月</text>
						</view>
					</view>
					</view>
				</view>
				<view class="no_data" v-if="totalPage <= paramsData.pageNum && !showNodata">
					～没有更多数据咯～
				</view>
				
			</view>
			<view class="main dis" style="z-index: 9999;height: 80vh;" v-if="showNodata">
				<view style="display: flex;align-items: center;justify-content: center;flex-direction: column;">
					<image src="https://hosue-omo.oss-cn-shenzhen.aliyuncs.com/assets/noData.png" mode="aspectFit" style="width: 200rpx;height: 200rpx;"></image>
					<text>暂无数据</text>
				</view>
			</view>
		</scroll-view>
		
	</view>
</template>

<script setup>
	import CustomNavBar from '@/components/CustomNavBar.vue';
	import topLeftIconVue from '@/components/topLeftIcon.vue';
	import filtrateBoxVue from './components/filtrateBox.vue';
	import {
		onUnload,
		onShow,
		onHide,
		onPullDownRefresh,
		onReachBottom,
		onPageScroll,
		onShareAppMessage
	} from '@dcloudio/uni-app'
	import {getHouseList} from '@/pages/home/api/home.js'
	import {
		reactive,
		ref,
		onMounted
	} from 'vue';
	const app = getApp()
	const data = reactive({
		navBarHeight: 0
	})
	onMounted(() => {
		data.navBarHeight = app.globalData.navBarHeight + app.globalData.statusBarHeight
		// getListData()

	})

	// 页面显示时触发（每次打开页面都会触发）
	onShow(() => {
		console.log('页面显示')
		paramsData.pageNum = 1
		getListData()
		app.setTabBarBadge()
	})
	// 页面隐藏时触发（如跳转到其他页面）
	onHide(() => {
		console.log('页面隐藏')
	})

	// 页面卸载时触发
	onUnload(() => {
		console.log('页面卸载')
	})

	// 监听用户下拉刷新事件
	onPullDownRefresh(() => {
		console.log('下拉刷新')
		// 刷新完成后停止下拉刷新动画
		uni.stopPullDownRefresh()
	})

	// 监听用户上拉触底事件
	onReachBottom(() => {
		console.log('上拉触底')
	})

	// // 监听页面滚动
	// onPageScroll((event) => {
	// 	console.log('页面滚动', event.scrollTop)
	// })

	// 监听用户点击右上角分享
	onShareAppMessage(() => {
		return {
			title: '分享标题',
			path: '/pages/index/index'
		}
	})

	const paramsData = reactive({
		pageNum: 1,
		pageSize: 10
	})
	const listData = ref([])
	const totalPage = ref(1)
	const triggered = ref(true)
	let isRefreshing = false //判断是否正在刷新，相当于加一个标志
	//下拉刷新
	const refreshFn = () => {
		if (isRefreshing) return
		isRefreshing = true
		if (!triggered.value) {
			triggered.value = true
		}
		paramsData.pageNum = 1
		getListData()
	}
	//触底上啦
	const scrolltolower = () => {
		console.log('触底拉')
		//判断是否有数据
		if (totalPage.value > paramsData.pageNum) {
			paramsData.pageNum++
			getListData()
		}
	}
	const showNodata = ref(false)
	//获取列表数据
	const getListData = async (params) => {
		let paramsDataT = paramsData
		if(params) paramsDataT = params
		const res = await getHouseList(paramsDataT)
		showNodata.value = false
		let list = res.data?.data?.list || []

		if (paramsData.pageNum == 1) {
			listData.value = list
		} else {
			listData.value = listData.value.concat(list)
		}
		totalPage.value = res.data?.data?.totalPage || 1
		// console.log('listData.value',listData.value,listData.value.length)
		if(listData.value.length == 0) showNodata.value = true
		//接口调用完成之后
		triggered.value = false
		isRefreshing = false
	}

	const handleClick = (id) => {
		uni.navigateTo({
			url: '/pagesA/details/details?id=' + id
		})
	}
	const gosearch = () => {
		uni.navigateTo({
			url: '/pagesA/search/search',
		})
	}
	const confirmData = async (params) => {
		console.log(params)
		let paramsT = {
			...params,
			pageNum: 1,
			pageSize: 10
		}
		getListData(paramsT)
	}
</script>

<style lang="less" scoped>
	.dropdown_box {}

	.scroll_view {
		height: calc(100vh - 350rpx);
	}

	.no_data {
		font-size: 24rpx;
		color: #9D9FA2;
		text-align: center;
	}

	.search_box {
		margin: 32rpx;
		padding: 14rpx 32rpx;
		border-color: #000000;
		background: #FFFFFF;
		border: 2rpx solid rgba(204, 204, 204, 1);
		border-radius: 32rpx;
		display: flex;

		.search_icon {
			width: 60rpx;
			height: 60rpx;
		}

		.full_flex {
			flex: 1;
			height: 60rpx;

		}
	}



	.main {
		// margin-top: 32rpx;
		padding: 32rpx;
		background: #F6F6F6;

		.block {
			margin-bottom: 32rpx;
			background: #FFFFFF;
			padding-bottom: 16rpx;
			// margin: 32rpx;
			// border: 8rpx solid rgba(255,255,255,1);
			overflow: hidden;
			border-radius: 32rpx 32rpx 0px 0px;

			.picture {
				// border: 8rpx solid rgba(255,255,255,1);
				border-radius: 32rpx 32rpx 0px 0px;
				height: 400rpx;
				width: 100%;
				background: #e3e4e5;
				display: flex;
				align-items: center;
				overflow: hidden;
				.picture_po{
					width: 100%;
				}
			}

			.title {
				font-family: PingFangSC-Semibold;
				font-size: 32rpx;
				color: #000000;
				line-height: 36rpx;
				font-weight: 600;
				margin-left: 16rpx;
				margin-top: 16rpx;
			}

			.address {
				font-family: PingFangSC-Regular;
				font-size: 26rpx;
				color: #9D9FA2;
				line-height: 36rpx;
				font-weight: 400;
				margin-left: 16rpx;
				margin-top: 16rpx;
				display: flex;

				.address_icon {
					width: 32rpx;
					height: 32rpx;
					margin-right: 16rpx;
				}
			}

			.label_price {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin: 16rpx;

				.label_box {
					text {
						font-family: PingFangSC-Regular;
						font-size: 20rpx;
						color: #666666;
						line-height: 24rpx;
						font-weight: 400;
						background: #F6F6F6;
						margin-right: 16rpx;
						padding: 8rpx;
					}
				}

				.price {
					font-family: Arial-BoldMT;
					font-size: 42rpx;
					color: #EE7930;
					text-align: right;
					line-height: 36rpx;
					font-weight: 700;

					text {
						font-family: PingFangSC-Regular;
						font-size: 28rpx;
						color: #EE7930;
						text-align: right;
						line-height: 36rpx;
						font-weight: 400;
					}
				}
			}
		}
	}
</style>